<link rel="stylesheet" href="nepadmin/lay/extends/treeSelect/css/metroGreen.css">
<div class="layui-fluid" lay-title="报销表单">
    <div class="layui-col-md9">
        <div class="layui-card">
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" lay-filter="form-group">
                    <div class="layui-form-item">
                        <label class="layui-form-label">报销金额</label>
                        <div class="layui-input-block">
                            <input type="text" id="money" name="money" lay-verify="required|money" autocomplete="off" placeholder="请输入报销金额" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">报销理由</label>
                        <div class="layui-input-block">
                            <textarea placeholder="请输入报销理由" name="content" class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div style="display: none;" id="taskListShow">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend style="font-size:14px" id="taskNodeTitle">办理信息</legend>
                        </fieldset>
                        <!-- 办理步骤 -->

                    </div>
                    <!-- 办理人 -->
                    <div style="display: none;" id="taskUserShow">

                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="form-group-submit">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">审批流程</div>
            <div class="layui-card-body">
                <ul class="layui-timeline" id="taskList">

                </ul>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['jquery', 'admin', 'form','layer','laydate','selectN','treeSelectP'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , form = layui.form
            , selectN = layui.selectN
            , treeSelectP = layui.treeSelectP
            , laydate = layui.laydate
            , admin = layui.admin;
        var table = POPUP_DATA.table;
        var taskId = POPUP_DATA.taskId;
        var processId = POPUP_DATA.processId;
        var processInstanceId = POPUP_DATA.processInstanceId;
        var id = POPUP_DATA.businessKey;
        var reimburse = {};

        if (id) {
            admin.get({
                url: '/oa/reimburse/info/' + id,
                async: false,
                success: function (res) {
                    if (res.code == 0) {
                        reimburse = res.reimburse;
                        if(reimburse){
                            form.val("form-group", {
                                "money": reimburse.money // "name": "value"
                                ,"content":reimburse.content
                            });
                        }
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });
        }

        // 获取流程信息
        var activitiNodeList =[];
        var data = {
            "processId" : processId,
            "taskId" : taskId
        };
        var paramsStr = JSON.stringify(data);
        var staff = {};
        admin.get({
            type: 'get',
            url: '/activiti/getNextTaskNodeList?params='+encodeURIComponent(paramsStr),
            async:false,
            dataType: 'json',
            success: function(data){
                if (data.code == 0){
                    staff = data.sysUser;
                    activitiNodeList = data.activitiNodeList;
                    if (activitiNodeList != null && activitiNodeList.length > 0) {
                        var str='<div class="layui-form-item">\
                                    <label class="layui-form-label">流程步骤</label>\
                                    <div class="layui-input-block">';
                        for(var i = 0,len=activitiNodeList.length; i < len; i++) {
                            var activitiNode = activitiNodeList[i];
                            var condition="";
                            if (activitiNode.condition) {
                                condition = activitiNode.condition;
                            }
                            if (i==0){
                                str+='<input type="radio" name="result" lay-filter="result" value="'+condition+'" title="'+activitiNode.name+'" checked="">';
                            } else {
                                str+='<input type="radio" name="result" lay-filter="result" value="'+condition+'" title="'+activitiNode.name+'" >';
                            }
                        }
                        str+='</div></div>';
                        $("#taskListShow").append(str);
                        $("#taskListShow").show();
                        // 判断第一个是否有数据切换
                        var activitiUserList = activitiNodeList[0].activitiUserList;
                        // 判断是否流程结束
                        if (activitiNodeList.length == 1 && activitiNodeList[0].isLastTask) {
                            console.log("流程结束");
                        } else if (activitiUserList != null && activitiUserList.length > 0) {
                            candidate(activitiUserList);
                        } else {
                            var str='<div class="layui-form-item">\
                                    <label class="layui-form-label">办理人</label>\
                                    <div class="layui-input-block">\
                                    <input type="text" id="tree" name="tree" lay-filter="tree" autocomplete="off" placeholder="请选择办理人"\
                                        class="layui-input">\
                                    </div>\
                                    </div>';
                            $("#taskUserShow").html(str);
                            $("#taskUserShow").show();

                            loadDeptUserTree();
                        }
                    }
                }
            }
        });

        // 获取历史活动
        admin.get({
            type: 'get',
            url: '/activiti/selectHisActivitiList?processInstanceId='+processInstanceId,
            dataType: 'json',
            success: function(data){
                if (data.code == 0){
                    var historicTaskList = data.list;
                    if (historicTaskList != null && historicTaskList.length > 0) {
                        for (var i=0;i<historicTaskList.length;i++){
                            var historicTask = historicTaskList[i];
                            var str='<li class="layui-timeline-item">\
                                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>\
                                        <div class="layui-timeline-content layui-text">\
                                            <h3 class="layui-timeline-title" style="font-size:12px">'+historicTask.startTime+'</h3>\
                                            <p style="font-size:10px">'+historicTask.assignee+historicTask.name+'</p>\
                                        </div>\
                                    </li>';
                             $("#taskList").append(str);
                        }
                    }
                }
            }
        });

        form.render(null, 'form-group');
        // 绑定result选择事件
        var staffSelect = null;
        form.on('radio(result)',function (data) {
            if (data.value == '0' && staff){
                // 驳回
                var data = [{id:staff.id,name:staff.userName}];
                // 已选人
                candidate(data);
            } else {
                //根据传参去获取流程中的人员数据
                if (activitiNodeList != null && activitiNodeList.length > 0) {
                    if (activitiNodeList.length == 1 && activitiNodeList[0].isLastTask) {
                        console.log("流程结束");
                        return;
                    }
                    var activitiUserList=[];
                    for (var i = 0, len = activitiNodeList.length; i < len; i++) {
                        if (data.value == activitiNodeList[i].condition){
                            activitiUserList=activitiNodeList[i].activitiUserList;
                        }
                    }
                    if (activitiUserList != null && activitiUserList.length > 0) {
                        candidate(activitiUserList);
                    } else {
                        var str='<div class="layui-form-item">\
                                        <label class="layui-form-label">办理人</label>\
                                        <div class="layui-input-block">\
                                        <input type="text" id="tree" name="tree" lay-filter="tree" autocomplete="off" placeholder="请选择办理人"\
                                            class="layui-input">\
                                        </div>\
                                        </div>';

                        $("#taskUserShow").html(str);
                        loadDeptUserTree();
                        $("#taskUserShow").show();
                    }
                }
            }

        });

        // 流程审核
        form.on('submit(form-group-submit)', function (data) {
            var field = data.field;
            var result = field.result;
            var assignee = "";
            if($("#tree").length > 0) {
                assignee = field.tree;
            }
            if($("#assignee").length > 0 && staffSelect != null){
                assignee = staffSelect.values.join(",");
            }
            var url = "/activiti/complete?_method=PUT&taskId="+taskId+"&result="+result+"&assignee="+assignee;
            admin.post({
                url: url,
                success: function (res) {
                    if (res.code == 0) {
                        // 提醒保存成功，关闭当前弹窗
                        layer.msg(res.msg);
                        layer.closeAll();
                        //刷新
                        table.reload('list-table-taskching', {
                            url: '/activiti/taskCheckingPage?token=' + admin.loginToken,
                            page: {
                                curr: 1
                            }
                        })
                    } else {
                        layer.msg(res.msg);
                    }
                }
            });

            return false;
        });

        // 候选人,data结构[{id:"",name:""}]
        function candidate(data) {
            var str='<div class="layui-form-item">\
                            <label class="layui-form-label">办理人</label>\
                            <div id="assignee">\
                            </div>\
                            </div>';
            $("#taskUserShow").html(str);
            //多选标签-所有配置
            staffSelect = selectN({
                //元素容器【必填】
                elem: '#assignee'
                ,search:[false,true]
                //候选数据【必填】
                ,selected: []
                ,data: data
                ,autoWidth:true
                ,last:true
                ,field:{idName:'id',titleName:'name'}
            });
            $("#taskUserShow").show();
        }
        // 加载组织人员树
        function loadDeptUserTree(){
            var setting = {
                view: {
                    selectedMulti: false
                },
                check: {
                    enable: false
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "pid",
                        rootPId: "0"
                    }
                },

            }
            treeSelectP.render({
                // 选择器
                elem: '#tree',
                // 数据
                data: '/sysUser/listTree?token=' + admin.loginToken,
                // 异步加载方式：get/post，默认get
                type: 'get',
                // 占位符
                placeholder: '请输入搜索关键字',
                // 是否开启搜索功能：true/false，默认false
                search: true,
                // 是否开始只有子节点显示
                isLeaf: true,
                setting: setting,
                // 点击回调
                click: function(d) {
                    // console.log(d);
                    $("#tree").val(d.current.id);
                },
                check: function(d) {

                },
                // 加载完成后的回调函数
                success: function(d) {

                }
            });
        }
    });
</script>